<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href='./scripts/bootstrap/css/bootstrap.min.css' rel='stylesheet' />
	<link href='./scripts/bootstrap/bootstrap-table/bootstrap-table.css' rel='stylesheet' />
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allMap{
		position: relative;
	}
	#div4{
			/*width:200px;
			height:450px;
			position:absolute;
			bottom:30px;
			right: 30px;
			border: 1px solid black;
			background-color: white;*/

			left: 10px;
			top: 100px;
			height:485px;
			width: 300px;
			position: absolute;
			border: 2px solid #D6E3F1;
			background:white;
			z-index: 9999;
			border-top-width: 0px;
			display: block;
	}

	#toolbar {
			position: absolute;
			top: 15px;
			right:40px !important;
			z-index: 99999999;
	}

	#title1{
		width: 100%;
		height: 30px;
		background-color: #5Fb8f1;
		padding-left: 15px;
		padding-top: 6px;
		color: white;
	}

	#inputdiv{
		margin-left:5px;
		margin-top:5px;
		width:190px;
		display: inline-block;
	}

	#selectdiv{
		display: inline-block;
		margin-left:5px;
		margin-top:5px;
		display:inline-block;
		width:85px;
		display: inline-block;
	}

	table tr:nth-child(odd){
		background: #ccc;
	}

	#div2{
			/*width:200px;
			height:450px;
			position:absolute;
			bottom:30px;
			right: 30px;
			border: 1px solid black;
			background-color: white;*/

			right:15px;
			bottom:15px;
			height:250px;
			width: 150px;
			position: absolute;
			border: 2px solid #D6E3F1;
			background:white;
			z-index: 9999;
			border-top-width: 0px;
			display: block;
	}

	#title{
		width: 100%;
		height: 30px;
		background-color: #5Fb8f1;
		text-align: center;
		padding-top: 6px;
		color: white;
	}

	.div3{
		width: 100%;
		height: 40px;
	}

	.img{
		width: 20px;
		height: 24px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 15px;
		margin-top: 8px;
	}

	.spa{
		color: black;
		font-size: 16px;
		margin-left: 0px;
		display: inline-block;
		vertical-align: middle;
		margin-top: 5px;
	}

	#allmap label{max-width:none;}
	</style>
	<script type="text/javascript" src="./scripts/jquery/jquery-3.0.0.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yaVqhnXO1G1dKLXsEG9yxYcLh38iXqVY"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool.js"></script>
	<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction.js"></script> -->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>

	<div id="div4" >
    <div id="title1" >实时水雨情</div>
    <input type="text" class="form-control" id ="inputdiv">
    <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">
      <option>雨量</option>
      <option>水位</option>
      <option>水质</option>
      <option>取水</option>
      <option>排污</option>
    </select>
    <div style="margin-top:10px;height:400px;width:100%;">
      <div style = "width:60px;height:34px;line-height:32px;border-right:1px solid #d1d1d1;display:inline-block;text-align:center;">序号</div>
      <div style = "width:115px;height:34px;line-height:32px;border-right:1px solid #d1d1d1;display:inline-block;text-align:center;">站名</div>
      <div style = "width:105px;height:34px;line-height:32px;display:inline-block;text-align:center;">雨量</div>
      <table class = "table"  width="300px" height="200px"style="overflow:scroll;text-align:center">
        <tr><td>1</td><td>版石</td><td>25.3</td></tr>
        <tr><td>2</td><td>蔡坊</td><td>25.3</td></tr>
        <tr><td>3</td><td>长沙</td><td>25.5</td></tr>
        <tr><td>4</td><td>龙头</td><td>25.2</td></tr>
        <tr><td>5</td><td>车头</td><td>25.2</td></tr>
        <tr><td>6</td><td>浮搓</td><td>25.5</td></tr>
        <tr><td>7</td><td>濂丰</td><td>25.2</td></tr>
        <tr><td>8</td><td>高云山</td><td>25.2</td></tr>
        <tr><td>9</td><td>龙布</td><td>25.5</td></tr>
        <tr><td>10</td><td>双芜</td><td>25.5</td></tr>
      </table>
    </div>
  </div>

	<div id="div2" >
    <div id="title">图例</div>
    <div class="div3">
      <img src="./images/fh/marker-red.png" class="img">
      <div class="spa">供水不足</div>
    </div>
  </div>

	<div id="toolbar" class="BMapLib_Drawing">
		<!-- <div class="BMapLib_Drawing BMap_noprint anchorTL" style="position: absolute; z-index: 10; text-size-adjust: none; bottom: auto; right: auto; top: 5px; left: 5px;">
			<div class="BMapLib_Drawing_panel">
				<a class="BMapLib_box BMapLib_hander" drawingtype="hander" href="javascript:void(0)" title="拖动地图" onfocus="this.blur()"></a>
				<a class="BMapLib_box BMapLib_marker" drawingtype="marker" href="javascript:void(0)" title="画点" onfocus="this.blur()"></a>
			</div>
		</div> -->
    <input type="button" class="btn btn-default" value="清除" onclick="clearFeatures()" />
    <input type="button" class="btn btn-default" value="全屏" onclick="resetMap()" style = ""/>
    <!-- <input type="button" class="btn btn-default" value="地图切换" onclick="switchMap()" /> -->
    <!-- <input type="button" class="btn btn-default" value="人工报警" onclick="mark()" /> -->

  </div>
</div>
</body>
</html>
<script type="text/javascript">
	var dataArr = [{"num":"62405200","name":"沙子岭"    ,"lon":"116.3440","lat":"26.8806","type":"ZQ"},
{"num":"62405400","name":"南丰"      ,"lon":"116.5312","lat":"27.2052","type":"ZQ"},
{"num":"62405800","name":"南城"      ,"lon":"116.6352","lat":"27.5474","type":"ZZ"},
{"num":"62401800","name":"廖家湾"    ,"lon":"116.4004","lat":"27.9757","type":"ZQ"},
{"num":"62406600","name":"娄家村(二)","lon":"116.2965","lat":"27.9893","type":"ZQ"},
{"num":"62408600","name":"马圩"      ,"lon":"116.4544","lat":"28.1204","type":"ZQ"},
{"num":"62402400","name":"李家渡"    ,"lon":"116.2511","lat":"28.2175","type":"ZQ"},
{"num":"62402600","name":"焦  石"    ,"lon":"116.254783","lat":"28.213672","type":"ZZ"},
{"num":"62402800","name":"柴埠口"    ,"lon":"116.178583","lat":"28.183401","type":"ZZ"},
{"num":"62403400","name":"洪门"      ,"lon":"116.7217","lat":"27.4733","type":"RR"},
{"num":"62401300","name":"廖坊"      ,"lon":"116.631400","lat":"27.752500","type":"RR"},
{"num":"62401350","name":"廖坊坝下*" ,"lon":"116.633333","lat":"27.750000","type":"RR"}];

// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
var myDis = new BMapLib.DistanceTool(map);
var newLayer = [], newLable =[];
var styleOptions = {
		strokeColor:"red",    //边线颜色。
		fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
		strokeWeight: 3,       //边线的宽度，以像素为单位。
		strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
		fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
		strokeStyle: 'solid' //边线的样式，solid或dashed。
}

map.centerAndZoom(new BMap.Point(116.4468383789,27.5813290750), 10);  // 初始化地图,设置中心点坐标和地图级别
// map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("抚州");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	//去除路网和绿地
	var myStyleJson = [ {
		"featureType" : "road",
		"elementType" : "all",
		"stylers" : {
			"visibility" : "off"
		}
	}, {
		"featureType" : "green",
		"elementType" : "all",
		"stylers" : {
			"visibility" : "off"
		}
	} ]
	map.setMapStyle({
		styleJson : myStyleJson
	});

	var mapLinePonit;
	$.getJSON('map2.json', function(data){
		console.log(data)
		mapLinePonit = data.features[0].geometry.rings[0];
		var points = [];
		for(var i=0; i<mapLinePonit.length; i++){
			points.push(new BMap.Point(mapLinePonit[i][0], mapLinePonit[i][1]))
		}
		var  test = [
			new BMap.Point(116.399, 39.910),
			new BMap.Point(116.405, 39.920),
			new BMap.Point(116.423493, 39.907445)
		];
		console.log('test', test)
		console.log('ponits', points)
		var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});   //创建折线
		console.log('polyline', polyline)
		map.addOverlay(polyline);   //增加折线
	});

	for(var i=0;i<dataArr.length;i++){

		var content = '<div style = "width:300px;height:100px;" id = "allDiv">'
		+'<div style = "color:black;display:inline-block;font-size:20px;margin-left:10px;width:195px;">'+ dataArr[i]['name'] +'</div>'
		+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">序号 : '+ dataArr[i]['num'] + '</div>'
		// +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">地址 : '+ dataArr[i]['add'] + '</div>'
		+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">水位 : 23.9 m </div>'
		+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">流量 : 46.23 m<sup>3</sup></div>'
		+'</div>'

		var marker = new BMap.Marker(new BMap.Point(dataArr[i]['lon'],dataArr[i]['lat']));  // 创建标注

		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(content,marker);
	}


	var drawingManager = new BMapLib.DrawingManager(map, {
				isOpen: false, //是否开启绘制模式
				enableDrawingTool: true, //是否显示工具栏
				drawingToolOptions: {
						anchor: BMAP_ANCHOR_TOP_LEFT, //位置
						offset: new BMap.Size(5, 5), //偏离值
				},
				circleOptions: styleOptions, //圆的样式
				polylineOptions: styleOptions, //线的样式
				polygonOptions: styleOptions, //多边形的样式
				rectangleOptions: styleOptions, //矩形的样式
				enableCalculate: true
		});
		drawingManager.addEventListener("overlaycomplete", function(e) {
			// newLayer.map(item => map.removeOverlay(item));
			newLayer.push(e.overlay);
			newLayer.push(e.label);
			console.log('啊速度飞萨芬')
			if(e.drawingMode === 'polyline'){
				alert((e.calculate/1000).toFixed(2)+'公里');
			}else if(e.drawingMode === 'polygon' || e.drawingMode === 'circle' || e.drawingMode === 'rectangle'){
				alert((e.calculate/1000000000).toFixed(2)+'平方千米');
			}

		});



	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}

	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}


	function clearFeatures(){
		for(var i=0; i<newLayer.length; i++){
			map.removeOverlay(newLayer[i])
		}
		for(var i=0; i<newLable.length; i++){
			map.removeOverlay(newLayer[i])
		}
	}





</script>
